<template>
  <a-layout-sider
    :class="['sider', isDesktop() ? null : 'shadow', theme, fixSiderbar ? 'ant-fixed-sidemenu' : null ]"
    width="256px"
    :collapsible="collapsible"
    v-model="collapsed"
    :trigger="null"
    style="overflow-y:auto;overflow-x:hidden;position:unset;background:#fff"
  >
    <a-tooltip :title="collapsed ? '展开' : '收起'" placement="right">
      <a-button block type="default" style="border-radius: 0;" @click="collapsed = !collapsed">
        <a-icon :type="collapsed ? 'right' : 'left'" />
      </a-button>
    </a-tooltip>
    <s-menu
      :collapsed="collapsed"
      :menu="menus"
      :theme="theme"
      :mode="mode"
      @select="onSelect"
      style="height: calc(100% - 32px);
    overflow-y: auto;
    overflow-x: hidden;"
    ></s-menu>
    <!--    <tree-menu :menu="menu"/>-->
  </a-layout-sider>
</template>

<script>
import SMenu from './index'
import { mixin, mixinDevice } from '@/utils/mixin'
import modifyPassword from '@/components/SelfModal/ModifyPassword'
import EditUserModal from '@/views/system/user/components/EditUserModal.vue'
import LinkedRoleListModal from '@/views/system/user/components/LinkedRoleListModal.vue'
import EditLangModal from '@/views/system/user/components/EditLangModal.vue'
import {mapActions, mapState} from 'vuex'
import {ACCESS_TOKEN} from "@/store/mutationTypes";
export default {
  name: 'SideMenu',
  components: {
    modifyPassword,
    EditUserModal,
    LinkedRoleListModal,
    EditLangModal,
    SMenu
  },
  mixins: [mixin, mixinDevice],
  props: {
    mode: {
      type: String,
      required: false,
      default: 'inline'
    },
    theme: {
      type: String,
      required: false,
      default: 'light'
    },
    collapsible: {
      type: Boolean,
      required: false,
      default: false
    },
    // collapsed: {
    //   type: Boolean,
    //   required: false,
    //   default: false
    // },
    menu: {
      type: Array,
      required: true
    }
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.user.userInfo,
    }),
    menus() {
      return this.menu.filter(value => {
        value.hideChildrenInMenu = false
        return value
      })
    }
  },
  watch: {
    collapsed: {
      handler(val) {
        this.$emit('showejmenu', !val)
      },
      immediate: true
    }
  },
  data() {
    return {
      collapsed: false,
    }
  },
  methods: {
    onSelect(obj) {
      this.$emit('menuSelect', obj)
    },
    getPopupContainer(triggerNode) {
      return document.getElementById('app')
    },
  }
}
</script>
<style lang="less" scoped>
.ant-menu-inline,
.ant-menu-vertical,
.ant-menu-vertical-left {
  /*border-right: 0;*/
}
.accountBox {
  text-align: center;
  padding: 0 10px;
  border-right: 1px solid #ddd;
  .accountBoxInner {
    padding: 5px 0;
    border-top: 1px solid #ddd;
  }
  .iconfont {
    font-size: 2.6rem;
  }
}

.ant-btn:hover,
.ant-btn:focus {
  color: black;
  background-color: #fff;
  border-color: #d9d9d9;
}

.accountBox-open {
  .iconfont {
    font-size: 2.6rem;
  }
}
</style>
